<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <my-header @addtask="addtask"></my-header>
    <!-- 主体部分 -->
    <my-body
      :list="renderlist"
      @stylealter="stylealter"
      @deletetask="deletetask"
      @allselect="allselect"
    ></my-body>
    <!-- 底部部分 -->
    <my-foot
      :list="list"
      :num="num"
      @alter="alter"
      @eliminate="eliminate"
    ></my-foot>
  </section>
</template>

<script>
import MyHeader from '@/views/Myheader.vue'
import MyBody from '@/views/Mybody.vue'
import MyFoot from '@/views/Myfoot.vue'
export default {
  components: {
    MyHeader,
    MyBody,
    MyFoot
  },
  data () {
    return {
      list: JSON.parse(localStorage.getItem('list')) || [],
      num: 1
    }
  },
  methods: {
    addtask (task) {
      const obj = {
        id: +new Date(),
        task,
        state: false
      }
      this.list = [obj, ...this.list]
    },
    stylealter (id) {
      const arr = this.list.find(item => item.id === id)
      arr.state = !arr.state
    },
    deletetask (id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    alter (num) {
      this.num = num
    },
    eliminate () {
      this.list = this.list.filter(item => !item.state)
    },
    allselect (style) {
      this.list.forEach(item => (item.state = style))
    }
  },
  computed: {
    renderlist () {
      switch (this.num) {
        case 1:
          return this.list
        case 2:
          return this.list.filter(item => !item.state)
        case 3:
          return this.list.filter(item => item.state)
        default:
          return this.list
      }
    }
  },
  watch: {
    list: {
      deep: true,
      handler (newvalue) {
        localStorage.setItem('list', JSON.stringify(newvalue))
      }
    }
  }
}
</script>

<style></style>
